<!doctype html>
{% load static %}
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>个人中心</title>
    <link href="{% static 'css/css.css' %}" rel="stylesheet" type="text/css">
    <script src="{% static 'admin/js/jquery.min.js' %}"></script>
</head>

<body>
{% load static %}
<div class="ge_rightone">
    <div class="ge_oneleft">
        {% if request.session.user.user_icon is None%}
        <img id="userIcon" src="{% static 'images/17.png' %}"/>
        {% else %}
        <img id="userIcon" src="{{request.session.user.user_icon}}"/>
        {% endif %}
        <p onclick="selectIcon()">修改头像</p>
        <input id="file" type="file" style="display: none" onchange="editIcon()">
    </div>
    <div class="ge_oneright">
        <div class="ge_oneright1"><p>{{request.session.user.nick_name}}</p>
            <span><img src="{% static 'images/18.png' %}"/></span>
            <span>晚上好</span>
            <a href="javascript:void(0)" onclick="toReset()">修改密码</a>
        </div>
        <div class="ge_oneright1">
            <p>Email: {{request.session.user.user_email}}</p>
        </div>
    </div>
</div>
<div class="zuji_title">
    <span>我的足迹</span>
</div>
<div class="zu_list">
    <ul>
    </ul>
</div>
</body>
<script>
    loadFootprint()

    function editIcon(){
        let img = document.getElementById("file")
        let file = img.files[0];//上传的文件
        //文件base64string获取
        if (window.FileReader) {
            let reader = new FileReader();
            reader.readAsDataURL(file);
            //监听文件读取结束后事件
            reader.onloadend = function (e) {
                let base64String = e.target.result;
                $("#userIcon").attr('src', base64String);
                $.post(
                    "/auth/exitIcon",
                    {"userIcon":base64String},
                    function (res){
                        if(res.code == 200){
                            alert("更换成功！")
                        }
                    }
                )
            };
        }
    }

    function selectIcon(){
        return $("#file").click();
    }

    function toReset(){
        parent.window.location.href = "/resetPassword.html"
    }

    function loadFootprint(){
        $.get(
            "/personal/getFootprint",
            function (res){
                if(res.code==200){
                    let goodsList = res.data;
                    for(let i=goodsList.length-1;i>=0;i--){
                        let goods = goodsList[i];
                        let li = document.createElement("li");
                        li.addEventListener('click',function (){
                            toGoods(goods.id)
                        })
                        let img = document.createElement("img");
                        img.src = goods.goods_img;
                        img.title = goods.goods_title;
                        li.append(img);
                        let div = document.createElement("div");
                        div.className = "font";
                        let h2 = document.createElement("h2");
                        h2.innerHTML = "￥ "+goods.goods_price;
                        div.append(h2);
                        let p = document.createElement("p");
                        p.innerHTML = goods.goods_title;
                        p.title = goods.goods_title;
                        div.append(p)
                        li.append(div)
                        $(".zu_list > ul").append(li)
                    }
                }
            }
        )
    }

    //进入详情
    function toGoods(id) {
        window.parent.location.href = "/details.html?goods_id=" + id
    }
</script>
